<template>
  <div class="temporary_workbench">
    <div class="title">
      <div class="title_tab">
        <div class="title_item"
             @click="tabState = true"
             :class="{is_active: tabState}">
          <span class="title_text">处理任务</span>
          <el-tooltip class="item" effect="dark" content="刷新" placement="bottom">
            <i class="iconfont icon-shuaxin" @click="$refs.reworkProcess.refresh()"></i>
          </el-tooltip>
        </div>
        <div class="title_item"
             @click="tabState = false"
             :class="{is_active: !tabState}">
          <span class="title_text">临时工艺更改</span>
          <el-tooltip class="item" effect="dark" content="刷新" placement="bottom">
            <i class="iconfont icon-shuaxin" @click="$refs.productionProcess.refresh()"></i>
          </el-tooltip>
        </div>
      </div>
      <div class="title_btn mes_btn" v-show="tabState">
        <disabled-btn
          v-btn-permission="'submit'"
          :judge="taskSubmitJudge"
          iconClass="iconfont icon-btn_Save"
          btnText="任务提交"
          btnType="success"
          @judgeClick="handleSubmit"></disabled-btn>
      </div>
    </div>
    <div class="fixed_top_56">
      <!--处理任务-->
      <rework-process v-show="tabState" :judge.sync="taskSubmitJudge" ref="reworkProcess"></rework-process>
      <!--临时工艺更改-->
      <production-process v-show="!tabState" ref="productionProcess"></production-process>
    </div>
  </div>
</template>

<script>
import ProductionProcess from './ProductionProcess'
import ReworkProcess from './ReworkProcess'

export default {
  name: 'TemporaryWorkbench',
  data() {
    return {
      tabState: true,
      taskSubmitJudge: {msg: '请选择需要操作的批次！'}
    }
  },
  components: {
    ReworkProcess,
    ProductionProcess
  },
  methods: {
    // 刷新
    refresh() {
      this.$refs.reworkProcess.refresh()
      this.$refs.productionProcess.refresh()
    },
    // 任务提交
    handleSubmit() {
      let selectItems = this.$refs.reworkProcess.selectItems
      let postData = {
        method: 'post',
        url: 'a/tmpturnoverbatch/tmpTurnoverBatch/submitTask',
        data: {
          tmpBatchIds: selectItems.reduce((pre, cur) => [...pre, cur.id], [])
        },
        noCommit: true
      }
      this.$store.dispatch('saveData', postData).then(() => {
        this.$message.success({
          message: '保存成功',
          duration: 1500,
          center: true,
          onClose: () => {
            this.$refs.reworkProcess.refresh()
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
  .temporary_workbench {
    .title {
      display: flex;
      height: 56px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      padding: 0px 20px;
      box-sizing: border-box;
      .title_tab {
        display: flex;
        height: 100%;
        .title_item {
          padding: 0px 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          border-bottom: 2px solid transparent;
          color: #666;
          cursor: pointer;
          &.is_active {
            color: #000;
            border-bottom-color: #00b4ff;
            .icon-shuaxin {
              display: block;
            }
          }
          .title_text {
            padding-right: 10px;
          }
          .icon-shuaxin {
            padding-top: 1px;
            display: none;
          }
        }
      }
    }
  }
</style>
